<template>
  <div class="index-page">
    <div class="logo-wrap">
      <img class="logo" src="~/static/soshu-logo.png" alt="我的资源站">
    </div>
    <div class="flex-row search-wrap">
      <input class="input" v-model="keyword" placeholder="输入要搜索的电子书名称..." @keyup.13="search">
      <div class="search-btn" @click="search">搜电子书</div>
    </div>
<!--    <div class="hot-search-wrap flex-row-center">-->
<!--      <div class="title">热门搜索：</div>-->
<!--      <div class="list flex-row-center">-->
<!--        <a href="/search?kw=pdf" target="_blank" class="item">pdf</a>-->
<!--        <a href="/" target="_blank" class="item">机器学习</a>-->
<!--        <a href="/" target="_blank" class="item">人工智能</a>-->
<!--        <a href="/" target="_blank" class="item">java</a>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      console.log('search')
      this.$router.push({ path: '/search', query: {title: this.keyword} })
    }
  }
}
</script>

<style lang="less" scoped>
  .index-page {
    .logo-wrap {
      margin-top: 60px;
      .logo {
        margin: 0 auto;
        width: 200px;
      }
    }
    .search-wrap {
      width: 800px;
      margin: 30px auto 0;
      justify-content: center;
      .input {
        border: 1px solid #ed510d;
        height: 45px;
        padding: 0 20px;
        flex: 1;
        font-size: 16px;
        outline: none;
      }
      .search-btn {
        display: inline-block;
        background: #ed510d;
        border: 1px solid #ed510d;
        color: white;
        text-decoration: none;
        padding: 0px 20px;
        height: 45px;
        line-height: 45px;
        cursor: pointer;
        user-select: none;
        border-radius: 0 4px 4px 0;
        &:hover {
          background: #ff3622;
        }
        &:active {
          background: #ff5227;
        }
      }
    }
    .hot-search-wrap {
      width: 800px;
      margin: 20px auto 0;
      .title {
        font-size: 14px;
      }
      .list {

        .item {
          font-size: 14px;
          color: #555;
          margin-left: 10px;
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
</style>
